<!-- 视图层 -->
<template>
  <van-nav-bar
    title="个人信息"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="username"
        label="公司名称"
        placeholder="输入公司名称"
        :rules="[{ required: true, message: '请填写公司名称' }]"
      />
      <van-field
        v-model="result"
        is-link
        readonly
        name="picker"
        label="职位类型"
        placeholder="请选择"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        v-model="department"
        name="department"
        label="所属部门"
        placeholder="所属部门"
        :rules="[{ required: true, message: '请填写所属部门' }]"
      />
      <van-field
        v-model="time"
        name="time"
        label="工作时间"
        placeholder="工作时间(例:2020.1-2022.2)"
        :rules="[{ required: true, message: '请填写工作时间' }]"
      />
      <van-field
        v-model="message"
        rows="5"
        autosize
        label="工作内容"
        type="textarea"
        maxlength="300"
        placeholder="请输入介绍信息"
        show-word-limit
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<!-- 逻辑层 -->
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
const result = ref("");
const showPicker = ref(false);
const columns = [
  { text: "会计", value: "Hangzhou" },
  { text: "老师", value: "Ningbo" },
  { text: "IT", value: "Wenzhou" },
  { text: "税务", value: "Shaoxing" },
  { text: "管理", value: "Huzhou" },
];
const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};
const onSubmit = (values) => {
  console.log("submit", values);
};
const department = ref("");
const time = ref("");
const message = ref("");
const username = ref("");
</script>
<!-- 样式层 -->
<style scoped>
</style>